<template>
  <view class="navbox">
	  <view class="top">
		   <view class="" v-for="i in items" :key="i.index" :class="{ac:i.index==current}" @click="changecurrent(i.index)">
		   	  {{i.name}}
		   </view>
	  </view>
	  <view class="con">
	  	     <view class="seach">
	  	     	<view class="iconfont icon-sousou"></view>
				<input @click="goseach" disabled type="text" placeholder="输入地区关键字"  placeholder-class="plca"/>
				<view class="ss">搜索</view>
	  	     </view>
			 <view class="sum">
			 	 <radio-group @change="changeradio">
			 	 	<label>
			 	 		<radio  :value="1" /><text>1居</text>
			 	 	</label>
					<label>
						<radio :value="2" /><text>2居</text>
					</label>
					<label>
						<radio checked :value="3" /><text>3居</text>
					</label>
					<label>
						<radio :value="4" /><text>4居</text>
					</label>
			 	 </radio-group>
			 </view>
			 <view class="bu">
			 	    <view class="l" @click="showall">查看所有套房源</view>
					<view class="r" @click="godt" >
						  <image src="../../static/img/dtt.png"></image>
						 <view class="iconfont icon-chufadihedidian"></view>
						 <view class="text">地图找房</view>
					</view>
			 </view>
	  </view>
  </view>
</template>

<script setup>
	import {ref} from 'vue'
	const emit=defineEmits(['changeoptiontype',"changeoptionsum"])
	const current=ref(0)
	const items=[
		{index:0,name:"整租"},
		{index:1,name:"合租/单间"},
		{index:2,name:"公寓"},
		{index:3,name:"短租"},
	]

	const showall=()=>{
		 uni.navigateTo({
		 	url:"/pages/seach/seach?isall=所有"
		 })
	}
	const godt=()=>{
		uni.switchTab({
			url:"/pages/dt/dt"
		})
	}
	const changecurrent=data=>{
		current.value=data
		emit('changeoptiontype',data)
	}
	const onClickItem=(da)=>{
		console.log(da)
	}
const changeradio=(da)=>{
	emit('changeoptionsum',da.detail.value)
}
const goseach=()=>{
	uni.navigateTo({
		url:"/pages/seach/seach"
	})
}
</script>

<style lang="scss" scoped>
	.navbox{
		height: 100%;
		width: 100%;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		.top{
			height: 75rpx;
			background-color: rgba(255, 255, 255, 0.6);
			display: flex;
			font-size: 25rpx;
			.ac{
				background-color: #fff;
				font-weight: 700;
				font-size: 27rpx;
			}
			view{
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 20rpx 20rpx 0 0;
			}
		}
		.con{
			flex: 1;
			background-color: #fff;
			overflow: hidden;
			padding: 25rpx;
			.seach{
				 height: 35%;			
				 overflow: hidden;
				 position: relative;
				 :deep(.plca){
					 color:#7b7b7b;
					 font-size: 25rpx;
				 }
				 input,.ss,.iconfont{
					 position: absolute;
					 top: 50%;
					 transform: translateY(-50%);
				 }
				 input{
					 height: 65rpx;
					 width: 100%;
					 background-color: #efefef;
					 border-radius: 30rpx;
					 z-index: 0;
					 box-sizing: border-box;
					 font-size: 25rpx;
					 padding-left: 70rpx;
				 }
				 .ss{
					 height: fit-content;
					 width: 100rpx;
					 right: 0;
					 font-size: 28rpx;
					 font-weight: 700;
					 border-left: 2rpx solid #dcdcdc;
					 display: flex;
					 align-items: center;
					 justify-content: center;
				 }
				 .iconfont{
					 left: 22rpx;
					 color: #7b7b7b;
					 z-index: 2;
				 }
			}
			.sum{
				height: 25%;		
				overflow: hidden;
				font-size: 25rpx;
				font-weight: 700;
				radio-group{
					height: 100%;
					display: flex;
					align-items: center;
					gap: 25rpx;
					label{
						height: 100%;
						display: flex;
						align-items: center;
						radio{
							transform: scale(.5);
						}
					}
				}

			}
			.bu{
				height: 40%;
				overflow: hidden;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.l{
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 27rpx;
					font-weight: 700;
					height: 75%;
					width: 50%;
					border-radius:10rpx;
					background-color:#f57c00;
					color: #fff;
				}
				.r{
					position: relative;
					font-size: 27rpx;
					height: 75%;
					width: 30%;
					border-radius:10rpx;
					color:#000;
					overflow: hidden;
					border: 1rpx solid rgba(0,0,0,0.1);
					.iconfont{
						position: absolute;
						left: 10%;
						top: 50%;
						transform: translateY(-50%);
					}
					.text{
					position: absolute;
					left: 30%;
					top: 50%;
					transform: translateY(-50%);
					font-weight: 700;
					width: fit-content;
					}
					image{
						height: 100%;
						width: 100%;
					}
				}
			}
		}
	}
	
</style>